"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Badge, badgeVariants } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Search, BookOpen, FileText, Video, ImageIcon, Download, Eye } from "lucide-react"
import { type VariantProps } from "class-variance-authority"

export function KnowledgeBase() {
  const [searchQuery, setSearchQuery] = useState("")

  const knowledgeCategories = [
    { id: "diseases", name: "病虫害防治", count: 45 },
    { id: "cultivation", name: "栽培技术", count: 32 },
    { id: "fertilization", name: "施肥管理", count: 28 },
    { id: "irrigation", name: "灌溉技术", count: 21 },
    { id: "harvest", name: "收获储存", count: 18 },
    { id: "varieties", name: "品种介绍", count: 35 },
  ]

  const knowledgeItems = [
    {
      id: 1,
      title: "水稻稻瘟病防治技术指南",
      category: "病虫害防治",
      type: "document",
      description: "详细介绍水稻稻瘟病的识别、预防和治疗方法",
      author: "农业专家组",
      date: "2024-01-15",
      downloads: 1250,
      views: 3420,
    },
    {
      id: 2,
      title: "玉米高产栽培技术视频教程",
      category: "栽培技术",
      type: "video",
      description: "从播种到收获的全程栽培技术演示",
      author: "李教授",
      date: "2024-01-10",
      downloads: 890,
      views: 2150,
    },
    {
      id: 3,
      title: "小麦施肥时期与用量图表",
      category: "施肥管理",
      type: "image",
      description: "小麦不同生长期的施肥指导图表",
      author: "农技站",
      date: "2024-01-08",
      downloads: 670,
      views: 1890,
    },
    {
      id: 4,
      title: "智能灌溉系统操作手册",
      category: "灌溉技术",
      type: "document",
      description: "智能灌溉设备的安装、调试和维护指南",
      author: "技术部",
      date: "2024-01-05",
      downloads: 450,
      views: 1200,
    },
    {
      id: 5,
      title: "蔬菜病害识别图册",
      category: "病虫害防治",
      type: "image",
      description: "常见蔬菜病害的症状图片和识别要点",
      author: "植保专家",
      date: "2024-01-03",
      downloads: 980,
      views: 2800,
    },
  ]

  const getTypeIcon = (type: string) => {
    switch (type) {
      case "document":
        return <FileText className="h-4 w-4" />
      case "video":
        return <Video className="h-4 w-4" />
      case "image":
        return <ImageIcon className="h-4 w-4" />
      default:
        return <BookOpen className="h-4 w-4" />
    }
  }

  const getTypeColor = (type: string): VariantProps<typeof badgeVariants>["variant"] => {
    switch (type) {
      case "document":
        return "default"
      case "video":
        return "secondary"
      case "image":
        return "outline"
      default:
        return "default"
    }
  }

  const filteredItems = knowledgeItems.filter(
    (item) =>
      item.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
      item.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
      item.category.toLowerCase().includes(searchQuery.toLowerCase()),
  )

  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-2xl font-bold">知识库</h2>
        <p className="text-muted-foreground">农业技术资料和专业知识文档</p>
      </div>

      <div className="flex gap-4">
        <div className="relative flex-1">
          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
          <Input
            placeholder="搜索知识文档..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="pl-10"
          />
        </div>
        <Button variant="outline">
          <BookOpen className="h-4 w-4 mr-2" />
          上传文档
        </Button>
      </div>

      <Tabs defaultValue="all" className="space-y-4">
        <TabsList>
          <TabsTrigger value="all">全部</TabsTrigger>
          <TabsTrigger value="documents">文档</TabsTrigger>
          <TabsTrigger value="videos">视频</TabsTrigger>
          <TabsTrigger value="images">图片</TabsTrigger>
        </TabsList>

        <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
          <div className="space-y-4">
            <Card>
              <CardHeader>
                <CardTitle className="text-lg">知识分类</CardTitle>
              </CardHeader>
              <CardContent className="space-y-2">
                {knowledgeCategories.map((category) => (
                  <div
                    key={category.id}
                    className="flex items-center justify-between p-2 hover:bg-muted rounded-lg cursor-pointer"
                  >
                    <span className="text-sm">{category.name}</span>
                    <Badge variant="secondary">{category.count}</Badge>
                  </div>
                ))}
              </CardContent>
            </Card>
          </div>

          <div className="md:col-span-3">
            <TabsContent value="all" className="space-y-4">
              <div className="grid gap-4">
                {filteredItems.map((item) => (
                  <Card key={item.id} className="hover:shadow-md transition-shadow">
                    <CardContent className="p-4">
                      <div className="flex items-start justify-between">
                        <div className="flex-1">
                          <div className="flex items-center gap-2 mb-2">
                            {getTypeIcon(item.type)}
                            <h3 className="font-semibold">{item.title}</h3>
                            <Badge variant={getTypeColor(item.type)}>{item.category}</Badge>
                          </div>
                          <p className="text-sm text-muted-foreground mb-3">{item.description}</p>
                          <div className="flex items-center gap-4 text-xs text-muted-foreground">
                            <span>作者: {item.author}</span>
                            <span>日期: {item.date}</span>
                            <span className="flex items-center gap-1">
                              <Eye className="h-3 w-3" />
                              {item.views}
                            </span>
                            <span className="flex items-center gap-1">
                              <Download className="h-3 w-3" />
                              {item.downloads}
                            </span>
                          </div>
                        </div>
                        <div className="flex gap-2 ml-4">
                          <Button variant="outline" size="sm">
                            <Eye className="h-4 w-4 mr-1" />
                            查看
                          </Button>
                          <Button variant="outline" size="sm">
                            <Download className="h-4 w-4 mr-1" />
                            下载
                          </Button>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </TabsContent>

            <TabsContent value="documents" className="space-y-4">
              <div className="grid gap-4">
                {filteredItems
                  .filter((item) => item.type === "document")
                  .map((item) => (
                    <Card key={item.id} className="hover:shadow-md transition-shadow">
                      <CardContent className="p-4">
                        <div className="flex items-start justify-between">
                          <div className="flex-1">
                            <div className="flex items-center gap-2 mb-2">
                              <FileText className="h-4 w-4" />
                              <h3 className="font-semibold">{item.title}</h3>
                              <Badge variant="default">{item.category}</Badge>
                            </div>
                            <p className="text-sm text-muted-foreground mb-3">{item.description}</p>
                            <div className="flex items-center gap-4 text-xs text-muted-foreground">
                              <span>作者: {item.author}</span>
                              <span>日期: {item.date}</span>
                              <span className="flex items-center gap-1">
                                <Eye className="h-3 w-3" />
                                {item.views}
                              </span>
                              <span className="flex items-center gap-1">
                                <Download className="h-3 w-3" />
                                {item.downloads}
                              </span>
                            </div>
                          </div>
                          <div className="flex gap-2 ml-4">
                            <Button variant="outline" size="sm">
                              <Eye className="h-4 w-4 mr-1" />
                              查看
                            </Button>
                            <Button variant="outline" size="sm">
                              <Download className="h-4 w-4 mr-1" />
                              下载
                            </Button>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  ))}
              </div>
            </TabsContent>

            <TabsContent value="videos" className="space-y-4">
              <div className="grid gap-4">
                {filteredItems
                  .filter((item) => item.type === "video")
                  .map((item) => (
                    <Card key={item.id} className="hover:shadow-md transition-shadow">
                      <CardContent className="p-4">
                        <div className="flex items-start justify-between">
                          <div className="flex-1">
                            <div className="flex items-center gap-2 mb-2">
                              <Video className="h-4 w-4" />
                              <h3 className="font-semibold">{item.title}</h3>
                              <Badge variant="secondary">{item.category}</Badge>
                            </div>
                            <p className="text-sm text-muted-foreground mb-3">{item.description}</p>
                            <div className="flex items-center gap-4 text-xs text-muted-foreground">
                              <span>作者: {item.author}</span>
                              <span>日期: {item.date}</span>
                              <span className="flex items-center gap-1">
                                <Eye className="h-3 w-3" />
                                {item.views}
                              </span>
                              <span className="flex items-center gap-1">
                                <Download className="h-3 w-3" />
                                {item.downloads}
                              </span>
                            </div>
                          </div>
                          <div className="flex gap-2 ml-4">
                            <Button variant="outline" size="sm">
                              <Eye className="h-4 w-4 mr-1" />
                              播放
                            </Button>
                            <Button variant="outline" size="sm">
                              <Download className="h-4 w-4 mr-1" />
                              下载
                            </Button>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  ))}
              </div>
            </TabsContent>

            <TabsContent value="images" className="space-y-4">
              <div className="grid gap-4">
                {filteredItems
                  .filter((item) => item.type === "image")
                  .map((item) => (
                    <Card key={item.id} className="hover:shadow-md transition-shadow">
                      <CardContent className="p-4">
                        <div className="flex items-start justify-between">
                          <div className="flex-1">
                            <div className="flex items-center gap-2 mb-2">
                              <ImageIcon className="h-4 w-4" />
                              <h3 className="font-semibold">{item.title}</h3>
                              <Badge variant="outline">{item.category}</Badge>
                            </div>
                            <p className="text-sm text-muted-foreground mb-3">{item.description}</p>
                            <div className="flex items-center gap-4 text-xs text-muted-foreground">
                              <span>作者: {item.author}</span>
                              <span>日期: {item.date}</span>
                              <span className="flex items-center gap-1">
                                <Eye className="h-3 w-3" />
                                {item.views}
                              </span>
                              <span className="flex items-center gap-1">
                                <Download className="h-3 w-3" />
                                {item.downloads}
                              </span>
                            </div>
                          </div>
                          <div className="flex gap-2 ml-4">
                            <Button variant="outline" size="sm">
                              <Eye className="h-4 w-4 mr-1" />
                              查看
                            </Button>
                            <Button variant="outline" size="sm">
                              <Download className="h-4 w-4 mr-1" />
                              下载
                            </Button>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  ))}
              </div>
            </TabsContent>
          </div>
        </div>
      </Tabs>
    </div>
  )
}
